<template>
  <div>
    <Table ref="dataTable" stripe :loading="table.loading" :columns="table.tableColumns" :data="table.tableRows" style="margin-top:20px;"
      @on-select="select" @on-select-cancel="selectCancel" @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel"
      @on-sort-change="changeSort"></Table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <Page :total="pager.total" :current="pager.pageNo" @on-change="changePageNo" @on-page-size-change="changePageSize"
          showSizer showTotal></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import * as utils from '@/api/utils-v2'

  export default {
    name: 'CourierExtractingTableMain',
    data() {
      return {
        urls: {
          searchUrl: '/courier-extracting/admin/pager-cond',
          activeUrl: '/courier-extracting/admin/active',
          removeUrl: '/courier-extracting/admin/remove/'
        },
        pager: {
          pageNo: 1,
          pageSize: 10,
          total: 0
        },
        searchOpts: {
          sortColumn: null,
          sortOrder: null,
        },
        dataDictCodes: ['IS_ACTIVE'],
        dataDictItems: {},
        table: {
          loading: false,
          tableColumns: [{
              type: 'selection',
              width: 52,
              key: 'id',
              align: 'center',
              fixed: 'left'
            },
            {
              title: '学校',
              key: 'schoolName',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.schoolName)
              }
            },
            {
              title: '抽成',
              key: 'extracting',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.extracting)
              }
            },
            {
              title: '抽成类型',
              key: 'type',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.type)
              }
            },
            {
              title: '描述',
              key: 'descs',
              minWidth: 120,
              sortable: true,
              render: (h, params) => {
                return h('span', {}, params.row.descs)
              }
            },
            // {
            //   title: '版本号',
            //   key: 'version',
            //   minWidth: 120,
            //   sortable: true,
            //   renderHeader: (h, params) => {
            //     return h('span', [
            //       h('span', '版本号'),
            //       h('Tooltip', {
            //         props: {
            //           content: '抽成版本号',
            //           placement: 'top',
            //           transfer: true,
            //           maxWidth: 500
            //         }
            //       }, [
            //         h('Icon', {
            //           props: {
            //             type: 'ios-help-circle'
            //           },
            //           style: {
            //             marginLeft: '3px'
            //           }
            //         })
            //       ])
            //     ])
            //   },
            //   render: (h, params) => {
            //     return h('span', {}, params.row.version)
            //   }
            // },
            {
              title: '创建时间',
              key: 'createTime',
              minWidth: 120,
              sortable: true,
              renderHeader: (h, params) => {
                return h('span', [
                  h('span', '创建时间'),
                  h('Tooltip', {
                    props: {
                      content: '抽成创建时间',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  }, [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ])
                ])
              },
              render: (h, params) => {
                return h('span', {}, params.row.createTime)
              }
            },
            {
              title: '更新时间',
              key: 'updateTime',
              minWidth: 120,
              sortable: true,
              renderHeader: (h, params) => {
                return h('span', [
                  h('span', '更新时间'),
                  h('Tooltip', {
                    props: {
                      content: '抽成更新时间',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  }, [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ])
                ])
              },
              render: (h, params) => {
                return h('span', {}, params.row.updateTime)
              }
            },
            // {
            //   title: '是否激活',
            //   key: 'isActive',
            //   minWidth: 120,
            //   sortable: true,
            //   renderHeader: (h, params) => {
            //     return h('span', [
            //       h('span', '是否激活'),
            //       h('Tooltip', {
            //         props: {
            //           content: '抽成是否激活',
            //           placement: 'top',
            //           transfer: true,
            //           maxWidth: 500
            //         }
            //       }, [
            //         h('Icon', {
            //           props: {
            //             type: 'ios-help-circle'
            //           },
            //           style: {
            //             marginLeft: '3px'
            //           }
            //         })
            //       ])
            //     ])
            //   },
            //   render: (h, params) => {
            //     let dictItem = utils.getDataDictItemDisplayValue(this, 'IS_ACTIVE', params.row.isActive)
            //     return h('span', {}, dictItem.displayValue)
            //   }
            // },

            // {
            //   title: '激活状态',
            //   key: 'isActive',
            //   minWidth: 100,
            //   align: 'center',
            //   render: (h, params) => {
            //     if (params.row.isActive === 0) {
            //       return h('Tooltip', {
            //         props: {
            //           content: '点击冻结',
            //           placement: 'top',
            //           transfer: true,
            //           maxWidth: 500
            //         }
            //       }, [
            //         h('Button', {
            //           props: {
            //             type: 'success',
            //             size: 'small'
            //           },
            //           on: {
            //             'click': () => {
            //               this.active(params.row)
            //             }
            //           }
            //         }, '激活')
            //       ])
            //     } else {
            //       return h('Tooltip', {
            //         props: {
            //           content: '点击激活',
            //           placement: 'top',
            //           transfer: true,
            //           maxWidth: 500
            //         }
            //       }, [
            //         h('Button', {
            //           props: {
            //             type: 'error',
            //             size: 'small'
            //           },
            //           on: {
            //             'click': () => {
            //               this.active(params.row)
            //             }
            //           }
            //         }, '冻结')
            //       ])
            //     }
            //   }
            // },
            {
              title: "操作",
              key: "action",
              width: 120,
              align: "center",
              fixed: "right",
              render: (h, params) => {
                return h(
                  "Dropdown", {
                    on: {
                      "on-click": itemName => {
                        this.userOpt(itemName, params.row);
                      }
                    },
                    props: {
                      transfer: true
                    }
                  },
                  [
                    h(
                      "Button", {
                        props: {
                          type: "primary",
                          size: "small"
                        }
                      },
                      [
                        "选择操作 ",
                        h("Icon", {
                          props: {
                            type: "ios-arrow-down"
                          }
                        })
                      ]
                    ),
                    h(
                      "DropdownMenu", {
                        slot: "list"
                      },
                      [
                        h(
                          "DropdownItem", {
                            props: {
                              name: "showEdit"
                            }
                          },
                          "编辑"
                        ),
                        h(
                          "DropdownItem", {
                            props: {
                              name: "showDetail"
                            }
                          },
                          "详情"
                        ),
                        // h(
                        //   "DropdownItem", {
                        //     props: {
                        //       name: "remove"
                        //     }
                        //   },
                        //   [
                        //     h(
                        //       "span", {
                        //         style: {
                        //           color: "red"
                        //         }
                        //       },
                        //       "删除"
                        //     )
                        //   ]
                        // ),
                      ]
                    )
                  ]
                );
              }
            }
          ],
          tableRows: [],
          selections: []
        }
      }
    },
    computed: {},
    mounted() {
      this.search()
    },
    methods: {
      search() {
        this.$emit('searchTable')
      },
      userOpt(itemName, row) {
        if (itemName === "showEdit") {
          this.$emit('showEditModal', JSON.parse(JSON.stringify(row)))
        } else if (itemName === "showDetail") {
          this.$emit('showDetailModal', JSON.parse(JSON.stringify(row)))
        } else if (itemName === "remove") {
          utils.remove(this, row);
        }
      },
      active(row) {
        utils.active(this, row)
      },
      select(selections, row) {
        utils.select(this, selections, row)
      },
      selectCancel(selections, row) {
        utils.selectCancel(this, selections, row)
      },
      selectAll(selections) {
        utils.selectAll(this, selections)
      },
      selectAllCancel(selections) {
        utils.selectAllCancel(this, selections)
      },
      changeSort(sortColumn) {
        utils.changeSort(this, sortColumn)
      },
      changePageNo(pageNo) {
        utils.changePageNo(this, pageNo)
      },
      changePageSize(pageSize) {
        utils.changePageSize(this, pageSize)
      }
    }
  }
</script>

<style>
</style>
